<template>
  <uv-popup ref="popup" round="15">
    <view class="mainWrap textCenter">
      <view class="fz14">籍贯</view>

      <picker-view :value="birthdayValue" @change="bindChange" class="picker-view">
        <picker-view-column>
          <view class="timeItem" v-for="(item,index) in list" :key="index" :class="{active: index ==birthdayValue[0]}">{{item.proviceName}}</view>
        </picker-view-column>
        <picker-view-column>
          <view class="timeItem" v-for="(item,index) in citys" :key="index" :class="{active: index ==birthdayValue[1]}">{{item.cityName}}</view>
        </picker-view-column>
        <picker-view-column>
          <view class="timeItem" v-for="(item,index) in countys" :key="index" :class="{active: index ==birthdayValue[2]}">{{item.countyName}}</view>
        </picker-view-column>
      </picker-view>

      <view class="button" @click="save">
        <uv-button text="确定" color="#F87299" shape="circle"></uv-button>
      </view>
    </view>
  </uv-popup>
</template>

<script setup lang="ts">
import useCounterStore from "@/stores/counter";
const counter = useCounterStore();
const { proxy } = getCurrentInstance();
const instance = getCurrentInstance();
let props = defineProps(["province", "city", "district"]);
const emit = defineEmits(["update:province", "update:city", "update:district"]);

let birthdayValue = ref([0, 0, 0]);
let list = ref([]);

let indicatorStyle = ref({
  height: "50px",
});

onMounted(() => {
  getInfo();
});

let citys = computed(() => {
  if (!list.value.length) return [];
  let index = birthdayValue.value[0];
  if (index == -1) index = 0;
  return list.value[index].city;
});

let countys = computed(() => {
  if (!citys.value.length) return [];
  let index = birthdayValue.value[1];
  if (index == -1) index = 0;
  return citys.value[index].county;
});

async function open(birthday, e) {
  if (!list.value.length) await getInfo();
  birthdayValue.value = [0, 0, 0];
  if (props.city && props.district && props.province) {
    let index = proxy.$utils.findIndexByField(
      list.value,
      "proviceName",
      props.province
    );
    let index1 = proxy.$utils.findIndexByField(
      citys.value,
      "cityName",
      props.city
    );
    let index2 = proxy.$utils.findIndexByField(
      countys.value,
      "countyName",
      props.district
    );
    birthdayValue.value = [
      index == -1 ? 0 : index,
      index1 == -1 ? 0 : index,
      index2 == -1 ? 0 : index,
    ];
  }
  instance.refs.popup.open("bottom");
}

async function getInfo() {
  list.value = await proxy.$apis.ObtainHometown();
}

function save() {
  console.log(birthdayValue.value);
  emit("update:province", list.value[birthdayValue.value[0]].proviceName);
  emit("update:city", citys.value[birthdayValue.value[1]].cityName);
  emit("update:district", countys.value[birthdayValue.value[2]].countyName);
  instance.refs.popup.close();
}

async function bindChange(e) {
  console.log("e.detail.value", e.detail.value);
  birthdayValue.value = e.detail.value;
}

defineExpose({ open });
</script>



<style lang="scss" scoped>
.mainWrap {
  padding: 25px 35px;
  .constellation {
    background-color: #e9e9e9;
    color: #333333;
    display: inline-block;
    margin-top: 12px;
    padding: 7px 22px;
    border-radius: 4px;
  }

  .picker-view {
    width: 100%;
    height: 150px;
    margin: 25px 0;
    .timeItem {
      line-height: 34px;
      text-align: center;
    }
  }
}
</style>






